<template>
    <div class="welcome-container">
      <div class="header">
        <h2>欢迎回来，{{ username }}</h2>
        <button @click="logout">退出登录</button>
      </div>
      
      <p>更快更强的重型组件，已经发布。</p>
      
      <div class="card-container">
        <div class="card">
          <h3>高级表格 欢迎使用</h3>
          <pre>yarn add @ant-design/pro-table</pre>
        </div>
        
        <div class="card">
          <h3>高级布局 欢迎使用</h3>
          <pre>yarn add @ant-design/pro-layout</pre>
        </div>
      </div>
      
      <div class="quick-actions">
        <button @click="goToManagement">进入管理页面</button>
        <button @click="goToQuery">数据查询</button>
        <button @click="goToProfile">个人中心</button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        username: localStorage.getItem('username') || '用户'
      }
    },
    methods: {
      logout() {
        localStorage.removeItem('token')
        localStorage.removeItem('username')
        this.$router.push('/login')
      },
      goToManagement() {
        this.$router.push('/management')
      },
      goToQuery() {
        this.$router.push('/query')
      },
      goToProfile() {
        this.$router.push('/profile')
      }
    }
  }
  </script>
  
  <style scoped>
  .welcome-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
  }
  
  .header h2 {
    color: #1890ff;
  }
  
  .header button {
    padding: 8px 16px;
    background-color: #f5222d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .header button:hover {
    background-color: #ff4d4f;
  }
  
  p {
    color: #8c8c8c;
    margin-bottom: 30px;
  }
  
  .card-container {
    display: flex;
    gap: 20px;
    margin: 20px 0;
  }
  
  .card {
    flex: 1;
    padding: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background-color: #fafafa;
  }
  
  .quick-actions {
    display: flex;
    gap: 10px;
    margin-top: 30px;
  }
  
  .quick-actions button {
    padding: 10px 20px;
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .quick-actions button:hover {
    background-color: #40a9ff;
  }
  </style>
      